import '@umijs/max';
import React, {useState} from 'react';
import {StepsForm, ProFormText, ProFormTextArea} from "@ant-design/pro-components";
import {Modal} from "antd";
import {InboxOutlined} from "@ant-design/icons";
import Dragger from "antd/es/upload/Dragger";
import type {UploadProps} from 'antd';
import {message} from 'antd';

export type Props = {
  onCancel: () => void;
  onSubmit: (values: any, file: File | null) => Promise<void>;
  visible: boolean;
};


const CreateModal: React.FC<Props> = (props) => {
  const {visible, onCancel, onSubmit} = props;
  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
  // const [currentStep] = useState(0);
  const uploadProps: UploadProps = {

    onChange: (info) => {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        const file = info.fileList[0].originFileObj;
        setUploadedFile(file as File);
        message.success(`${info.file.name} 文件上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    }
  };
  return (
    <StepsForm
      stepsProps={{
        size: 'small',
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            width={640}
            bodyStyle={{padding: '32px 40px 48px'}}
            destroyOnClose
            title={'数据结构'}
            open={visible}
            footer={submitter}
            onCancel={() => onCancel?.()}
          >
            {dom}
          </Modal>
        );
      }}
      onFinish={async (values) => {
        onSubmit?.(values, uploadedFile);
      }}
    >
      <StepsForm.StepForm
        initialValues={{
          structureName: 'my_structure',
        }}
        name={'info'}
        title={'结构信息'}
      >
        <ProFormText
          name="structureName"
          width="md"
          label="结构名称"
          tooltip="最长为 50 位"
          placeholder="请输入结构名称"
          rules={[{required: true}]}
        />

        <ProFormTextArea
          name="dataStructure"
          label="数据结构"
          tooltip="不填写则将按照第一次上传文件为准"
          width="lg"
          placeholder="示例：A,B,C,D,E"
        />

      </StepsForm.StepForm>
      <StepsForm.StepForm
        title={'文件上传'}
        name='file'
      >
        <Dragger {...uploadProps} maxCount={1} name='file' accept={'.csv,.json,.xml,.yaml'}>
          <p className="upload-drag-icon">
            <InboxOutlined/>
          </p>
          <p className="upload-text">点击或拖拽文件到此区域上传</p>
          <p className="upload-hint">
            支持单个或批量上传。（目前仅支持csv、json、xml、yaml文件）
          </p>
        </Dragger>
      </StepsForm.StepForm>
    </StepsForm>
  );
};
export default CreateModal;



